<template>
	<view class="search">
		<musichead title="搜索" :icon="true" :iconBlack="true"></musichead>
		<view class="container">
			<scroll-view scroll-y="true"
				<!-- 搜索输入框 -->
				<view class="search-search">
					<text class="iconfont iconsearch"></text>
					<input type="text" placeholder="搜索歌曲" v-model="searchWord" @input="handleToSuggest" @confirm="handleToSearch(searchWord)"/>
					<text class="iconfont iconguanbi" v-show="searchType != 1" @tap="handleToClose"></text>
				</view>
				
				<block v-if="searchType == 1">
					<!-- 搜索记录 -->
					<view class="search-history">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont iconlajitong" @tap="handleToClear"></text>
						</view>
						<view class="search-history-list">
							<view v-for="(item,index) in searchHistory" :key="index" @tap="handleToWord(item)">{{item}}</view>
						</view>
					</view>
					
					<!-- 热搜榜 -->
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
					
						<view class="search-hot-item" v-for="(item,index) in searchHot" :key="index" @tap="handleToWord(item.searchWord)">
						
							<view class="search-hot-top">{{index+1}}</view>
							<view class="search-hot-word">
								<view>
									{{item.searchWord}}<image :src="item.iconUrl" mode="aspectFit"></image>
								</view>
								<view>{{item.content}}</view>
							</view>
							<text class="search-hot-count">{{item.score}}</text>
						</view>
					</view>

				</block>
				
				<block v-else-if="searchType == 2">
					<!-- 搜索结果列表 -->
					<view class="search-result">
						
						<view class="search-result-item" v-for="(item,index) in searchList" :key="index" @tap="handleToDetail(item.id)">
							<view class="search-result-word">
								<view>{{item.name}}</view>
								<view>{{item.artists[0].name}} - {{item.album.name}}</view>
							</view>
							<text class="iconfont iconbofang"></text>
						</view>
						
					</view>
				</block>
				<block v-else-if="searchType==3">
					<!-- 搜索提示列表 -->
					<view class="search-suggest">
						<view class="search-suggest-head">搜索:“{{searchWord}}”</view>
						<view class="search-suggest-item" v-for="(item,index) in searchSuggest" :key="index" @tap="handleToWord(item.keyword)">
							<text class="iconfont iconsearch"></text>{{item.keyword}}
						</view>
					</view>
				</block>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {searchHot,searchWord,searchSuggest} from "../../common/api.js"
	export default {
		data() {
			return {
				searchHot:[],
				searchWord:'',
				searchHistory:[],
				searchType:1,
				searchList:[],
				searchSuggest:[]
			};
		},
		onLoad(){
			//获取热搜列表(详细)
			searchHot().then((res)=>{
				if(res.data.code==200){
					this.searchHot = res.data.data
				}
			}),
			//获取搜索关键字缓存记录
			uni.getStorage({
				key:'searchHistory',
				success:(res)=>{
					this.searchHistory = res.data
				}
			})
		},
		methods:{
			//点击，将搜索词绑定到搜索输入框中
			handleToWord(word){
				this.searchWord = word
				this.handleToSearch(word)
			},
			//点击搜索
			handleToSearch(word){
				this.searchHistory.unshift(word)
				//去重
				this.searchHistory = [...new Set(this.searchHistory)]
				//搜索记录关键词最多显示是个
				if(this.searchHistory.length > 10){
					this.searchHistory.length = 10
				}
				//设置搜索关键词缓存
				uni.setStorage({
					key:"searchHistory",
					data:this.searchHistory
				})
				//获取搜索结果
				this.getSearchList(word)
				
			},
			//获取搜索结果
			getSearchList(word){
				searchWord(word).then((res)=>{
					if(res.data.code == 200){
						this.searchList = res.data.result.songs
						this.searchType = 2
					}
				})
			},
			//清除搜索记录
			handleToClear(){
				uni.removeStorage({
					key:'searchHistory',
					success:(res)=>{
						this.searchHistory = []
					}
				})
			},
			//跳转到详情页
			handleToDetail(songId){
				uni.navigateTo({
					url:"/pages/detail/detail?songId="+songId
				})
			},
			//关闭搜索列表页
			handleToClose(){
				this.searchWord = ''
				this.searchType = 1
			},
			//搜索下拉提示
			handleToSuggest(e){
				let value = e.detail.value
				//如果为空不提示，并隐藏提示页
				if(!value){
					this.searchWord = ''
					this.searchType = 1
					return 
				}
				searchSuggest(value).then((res)=>{
					if(res.data.code == 200){
						this.searchSuggest = res.data.result.allMatch
						this.searchType = 3
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
@import url("../../common/iconfont.css");
.search-search{
	display: flex;
	align-items: center;
	height: 70rpx;
	margin: 70rpx 30rpx 50rpx 30rpx;
	background: #f7f7f7;
	border-radius: 50rpx;
	text{
		font-size: 26rpx;
		margin:0 26rpx;
	}
	input{
		font-size: 26rpx;
		flex: 1;
	}
}

//搜索记录样式
.search-history{
	margin: 0 30rpx 50rpx 30rpx;
	font-size: 26rpx;
	.search-history-head{
		display: flex;
		justify-content: space-between;
		
		margin-bottom: 36rpx;
	}
	.search-history-list{
		display: flex;
		flex-wrap: wrap;
		view{
			padding:16rpx 28rpx;
			border-radius: 40rpx;
			background:#f7f7f7;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			
		}
	}
}

//热搜榜样式
.search-hot{
	margin: 0 30rpx;
	font-size: 26rpx;
	.search-hot-head{
		margin-bottom: 36rpx;
	}
	.search-hot-item{
		display: flex;
		align-items: center;
		margin-bottom: 58rpx;
		.search-hot-top{
			color: #fb2222;
			width: 60rpx;
			margin-left: 8rpx;
		}
		.search-hot-word{
			flex: 1;
			view:nth-child(1){
				font-size: 30rpx;
				color: black;
				image{
					width: 48rpx;
					height: 22rpx;
				}
			}
			view:nth-child(2){
				font-size: 24rpx;
				color: #878787;
			}
		}
		text{
			color: #878787;
		}
	}
}

//搜索结果页面样式
.search-result{
	border-top: 2rpx solid #e4e4e4;
	padding: 30rpx;
	.search-result-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #e4e4e4;
		.search-result-word{

			view:nth-child(1){
				font-size: 28rpx;
				color: #235790;
				margin-bottom: 12rpx;
			}
			view:nth-child(2){
				font-size: 22rpx;
				color: #898989;
			}
		}
		text{
			font-size: 50rpx;
		}
	}
	
}

//搜索提示页样式
.search-suggest{
	border-top: 2rpx solid #e4e4e4;
	padding: 30rpx;
	font-size: 26rpx;
	.search-suggest-head{
		color: #4574a5;
		margin-bottom: 74rpx;
	}
	.search-suggest-item{
		color: #5d5d5d;
		margin-bottom: 74rpx;
		text{
			color: #bdbdbd;
			margin-right: 28rpx;
		}
	}
}

</style>
